<template>
	<view class="content">
		<view class="">
			<view class="page-section swiper">
				<image :src="imgurl" mode=""></image>
			</view>
		</view>
		<view id="scrollView" class="search-box" v-bind:class="[isTop === 1? 'search-box-f':'']">
			<view class="mall_top_mask">
				<!-- 地址和搜索 -->
				<SearchBar @searchFun="searchFun" @openpop="openpopup" :address="address" />
			</view>
		</view>
		<view class="screen-box" id="scrollView-s" v-bind:class="[isTop_s === 1? 'screen-box-f':'']">
			<view @tap="chooseScr(index)" class="screen-choose" :class="[sort_type===index?'isScr':'']" v-for="(item,index) in chooseData"
			 :key="index">
				{{item.label}}
			</view>
			<view class="choose-add" @tap="openDrawer">筛选</view>
			<!-- 筛选操作栏 -->
			<!-- <HMfilterDropdown style="margin-left: auto;" :filterData="filterData" :defaultSelected="filterDropdownValue" @confirm="confirm" :updateMenuName="false" /> -->
		</view>
		<uni-drawer :visible="true" ref="drawer" width="280" mode="right">
			<view style="padding:0px 24px;">
				<view class="d-title">
					岗位选择（多选）
				</view>
				<view class="job_box">
					<view class="job_data" :class="[item.isChoose? 'job_choose':'']" v-for="(item,index) in job_data" @tap="chooseJob(index)">
						{{item.job_name}}
					</view>
				</view>
				<view class="d-title">
					薪酬范围（单选）
				</view>
				<view class="job_box">
					<view class="job_data" :class="[item.isChoose? 'job_choose':'']" @tap="chooseSa(index)" v-for="(item,index) in salary_range">
						{{item.label}}
					</view>
				</view>
				<view class="d-title">
					基本福利（多选）
				</view>
				<view class="job_box">
					<view class="job_data" :class="[item.isChoose? 'job_choose':'']" v-for="(item,index) in JobTags" @tap="chooseTag(index)">
						{{item.tag_name}}
					</view>
				</view>
			</view>
			<view class="c_btn_box">
				<view class="release" :class="[isRe?'sure':'']" @tap="release">
					重置
				</view>
				<view class="sure" @tap="chooseAll">
					确定
				</view>
			</view>
		</uni-drawer>
		<view class="list-box" v-if="Array.prototype.isPrototypeOf(showList) && showList.length > 0">
			<view class="list" @tap="toDe(item)" v-for="(item,index) in showList" :key="index">
				<block >
					<view class="title-box">
						<view class="tit-l">{{item.recruit_job_title}}</view>
						<view class="tit-r">{{item.recruit_job_name}}</view>
					</view>
					<view v-if="job_tab==0" class="money">{{item.salary_min}}-{{item.salary_max}}元/月</view>
					<view v-else-if="job_tab==1" class="money">{{item.salary_min}}元/日</view>
					<view v-else-if="job_tab==2" class="money">{{item.salary_min}}元/周</view>
					<view v-else-if="job_tab==3" class="money">{{item.salary_min}}元/时</view>
					<view v-else class="money">{{item.salary_min}}元/{{item.recruit_job_type|transStep}}</view>
					<view class="flex flex-wrap">
						<view class="tag" v-for="(tag, index) in item.tag_data" :key="index">
							<view class="cu-tag light radius line-gray">
								{{ tag.tag_name || ''}}
							</view>
						</view>
					</view>
					<view class="address-box">
						<view class="address">
							{{item.city_address}}
						</view>
						<view v-show="item.city_address.lenth" class="line"></view>
						<view class="company">
							{{item.recruit_company_name}}
						</view>
					</view>
				</block>
			</view>
			<view>
				<uni-load-more @getLists ="updateList" :status="status" :content-text="contentText" color="#07C160" />
			</view>
		</view>
		<view v-else>
			<image src="../../static/img/poster/unstart.png" mode="" style="width: 200px;height: 200px;display: block;margin: 0 auto"></image>
			<view style="text-align: center;padding-top:16px;font-size: 16px;">抱歉，暂时还没有职位哦~</view>
		</view>
		<uni-popup :show="false" type="right" ref="popup" :maskClick="false">
			<view class="content" style="background-color: #FFFFFF;">
				<t-city @changeAddress_name="changeAddress_name" />
			</view>
		</uni-popup>

	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import TCity from '@/components/t-city.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import SearchBar from "./components/SearchBar";
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import missionHallData from "@/common/missionHallData.js";
	import {
		job_lists,
		getphone,
		operatingrecord,
		jobSearch,
		getScreen
	} from "../../api/user.js"
	export default {
		components: {
			SearchBar,
			uniLoadMore,
			'uni-popup': uniPopup,
			'HMfilterDropdown': HMfilterDropdown,
			't-city': TCity
		},
		data() {
			return {
				imgurl: '',
				job_data: [],
				JobTags: [],
				isTop: 0,
				isTop_s: '',
				address: "常州",
				status: 'more',
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '加载中'
				}, {
					value: 'noMore',
					text: '没有更多'
				}],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pageLists: [],
				page: 0,
				isToken: false,
				jobLists: [],
				showList: [],
				resList: [],
				job_tab: 0,
				phone_num: "",
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				ruleData: '',
				time: '',
				token: "",
				sort_type: 1,
				is_within_scope: 0,
				filterDropdownValue: [],
				filterData: missionHallData,
				updateMenuName: false,
				chooseData: [{
						label: '推荐',
						value: 0,
					},
					{
						label: '最新',
						value: 1,
					}
				],
				myScroll: '',
				myScroll_s: '',
				salary_range: [{
					label: '不限',
					value: 5,
					isChoose: false
				}, {
					label: '1500元以下',
					value: 0,
					isChoose: false
				}, {
					label: '1500-3000元',
					value: 1,
					isChoose: false
				}, {
					label: '3000-5000元',
					value: 2,
					isChoose: false
				}, {
					label: '5000-8000元',
					value: 3,
					isChoose: false
				}, {
					label: '8000元以上',
					value: 4,
					isChoose: false
				}, ],
				type_data: [{
						label: '拿推荐费',
						id: 0,
						url: '../../static/img/index/tj.png'
					},
					{
						label: '日结工资',
						id: 0,
						url: '../../static/img/index/rj.png'
					},
					{
						label: '周结工资',
						id: 0,
						url: '../../static/img/index/zj.png'
					},
					{
						label: '小时工',
						id: 0,
						url: '../../static/img/index/xs.png'
					}
				],
				isRe: false,
				screen_data: {
					jobs: [],
					salary_range: 5,
					tags: []
				}
			}
		},
		mounted() {

		},
		computed:{
			// showList(){
			// 	return this.showList ? this.showList:[]
			// }
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.myScroll) {
				this.isTop = 1
			} else {
				this.isTop = 0
			}
			if (e.scrollTop > this.myScroll_s) {
				this.isTop_s = 1
			} else {
				this.isTop_s = 0
			}
		},
		onLoad(e) {
			this.page = 0
			// console.log(e.id, 9999999)
			if (e.id == 0) {
				this.job_tab = 4
			} else {
				this.job_tab = e.id
			}
			this.token = uni.getStorageSync('authorization')
			if (this.token) {
				this.isToken = true

			} else {
				this.isToken = false
			}

			this.imgurl = `https://static.cholink.com/recruit-staff/recruit-wx/sub_banner_${Number(e.id)+1}.png`
			// console.log(this.imgurl)
			const query = uni.createSelectorQuery().in(this);
			query.select('#scrollView').boundingClientRect(data => {
				this.myScrol = data.top
			}).exec();
			query.select('#scrollView-s').boundingClientRect(data => {
				this.myScroll_s = data.top
			}).exec();
			setTimeout(function() {
				// console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			// console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			this.pullUp()
		},
		onShow() {
			this.page = 0
			this.token = uni.getStorageSync('authorization')
			if (this.token) {
				this.isToken = true

			} else {
				this.isToken = false
			}
			// this.job_data = []
			// this.JobTags = []
			if(!this.job_data.length||!this.JobTags.length) {
				getScreen().then(res => {
					res.data.JobNames.forEach(item => {
						this.job_data.push({
							job_name: item,
							isChoose: false
						})
					})
					res.data.JobTags.forEach(item => {
						this.JobTags.push({
							tag_name: item,
							isChoose: false
						})
					})
				})
			}
			this.get_job_lists()
		},
		methods: {
			pullUp(){
				let _self = this
				_self.status = 'loading'
				uni.showNavigationBarLoading()
				
				// console.log('reach');
				// if (_self.showList.length > 0) {
					setTimeout(function() {
						_self.page += 1
						job_lists({
							job_type: Number(_self.job_tab),
							tag_id: 0,
							area: _self.address,
							query_data: '',
							screen_data: _self.screen_data,
							sort_type: _self.sort_type,
							page: _self.page,
						}).then(res => {
							if (res.data) {
								_self.status = 'more'
								res.data.forEach(item => {
									_self.showList.push(item)
								})
							} else {
								return _self.status = 'noMore'
							}
						})
				
				
						// _self.showList=_self.showList.concat(_self.pageLists);
				
						// _self.status = 'more'
						uni.hideNavigationBarLoading()
					}, 500);
				// }
			},
			chooseScr(id) {
				this.sort_type = id
				this.get_job_lists()
			},
			chooseAll() {
				this.screen_data = {
					jobs: [],
					salary_range: 5,
					tags: []
				}
				this.job_data.forEach(item => {
					if (item.isChoose) {
						this.screen_data.jobs.push(item.job_name)
					}
				})
				this.salary_range.forEach(item => {
					if (item.isChoose) {
						this.screen_data.salary_range = item.value
					}
				})
				this.JobTags.forEach(item => {
					if (item.isChoose) {
						this.screen_data.tags.push(item.tag_name)
					}
				})
				job_lists({
					job_type: Number(this.job_tab),
					tag_id: 0,
					area: this.address,
					query_data: '',
					screen_data: this.screen_data,
					sort_type: this.sort_type,
					page: 0
				}).then(res => {
					this.jobLists = res.data
					this.showList = this.jobLists
				})
				this.page =0
				this.$refs.drawer.close()
			},
			to_D(id) {
				uni.navigateTo({
					url: '/pages/job_class/job_class?id=' + id
				})
			},
			release(){
				this.job_data.forEach((item,index)=>{
					item.isChoose = false
				})
				this.salary_range.forEach((item,index)=>{
					item.isChoose = false
				})
				this.JobTags.forEach((item,index)=>{
					item.isChoose = false
				})
				this.isRe = false
				this.screen_data = {
					jobs:[],
					salary_range:5,
					tags:[]
				}
				job_lists({
					job_type: Number(this.job_tab),
					tag_id: 0,
					area: this.address,
					query_data: '',
					screen_data: this.screen_data,
					sort_type: this.sort_type,
					page: 0
				}).then(res => {
					this.jobLists = res.data
					this.showList = this.jobLists
				})
				this.page=0
				this.$refs.drawer.close()
			},
			chooseJob(id){
				this.isRe = true
				this.job_data.forEach((item,index)=>{
					if(id === index){
						item.isChoose = !item.isChoose
						if(!item.isChoose){
							this.screen_data.jobs.pop(item.job_name)
						}
					}
				})
			},
			chooseSa(id){
				this.isRe = true
				this.salary_range.forEach((item,index)=>{
					if(id === index){
						item.isChoose = true
					}else{
						item.isChoose = false
					}
				})
			},
			chooseTag(id){
				this.isRe = true
				this.JobTags.forEach((item,index)=>{
					if(id === index){
						item.isChoose = !item.isChoose
						if(!item.isChoose){
							this.screen_data.tags.pop(item.tag_name)
						}
					}
				})
			},
			openDrawer() {
				
				this.$refs.drawer.open()
			},
			updateList(){
				this.pullUp()
				// this.onReachBottom()
			},
			confirm(e) {
				// console.log(e.index)
				// console.log(e.value)
			},
			getPhoneNumber(e) {
				getphone({
					recruit_job_id: 1,
					encrypted_data: e.detail.encryptedData,
					iv: e.detail.iv
				}).then(res => {
					console.log(res)
				})
			},

			searchFun(search) {
				job_lists({
					job_type: Number(this.job_tab),
					tag_id: 0,
					area: this.address,
					query_data: search,
					screen_data: this.screen_data,
					sort_type: this.sort_type,
					page: 0,
				}).then(res => {
					this.jobLists = res.data
					this.showList = this.jobLists
				})

			},
			changeAddress_name(res) {
				this.address = res.cityName
				this.$refs.popup.close()
			},
			openpopup() {
				this.$refs.popup.open()
			},
			toDe(events) {
				if (this.isToken) {
					operatingrecord({
						operation_type: 0,
						recruit_job_id: events.recruit_job_id
					}).then(res => {
						console.log(res,7777)
					})
					var event = JSON.stringify(events)
					uni.navigateTo({
						url: '/pages/detail/detail?data=' + event
					})
				} else {
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			},
			get_job_lists() {
				console.log(this.job_tab, 7777)
				if (this.isToken) {
					job_lists({
						job_type: Number(this.job_tab),
						tag_id: 0,
						area: this.address,
						query_data: '',
						screen_data: this.screen_data,
						sort_type: this.sort_type,
						page: 0,
					}).then(res => {
						this.jobLists = res.data
						this.showList = this.jobLists
					})
				} else {
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			}
		},
		filters: {
			transStep(val) {
				if (val == 0) {
					return "月"
				} else if (val == 1) {
					return "日"
				} else if (val == 2) {
					return "时"
				} else {
					return "周"
				}
			}
		}

	}
</script>

<style>
	.c_btn_box {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.release {
		background: #CCCCCC;
		margin-right: 14px;
	}

	.sure {
		background: #0AC770;
	}

	.c_btn_box view {
		width: 109px;
		height: 44px;
		border-radius: 25px;
		font-size: 17px;
		text-align: center;
		line-height: 44px;
		color: #FFFFFF;
	}

	.d-title {
		font-size: 14px;
		font-weight: bold;
		margin-top: 15px;
	}

	.job_data {
		width: 104px;
		height: 30px;
		display: inline-block;
		border: 1px solid #E6E6E6;
		border-radius: 4px;
		line-height: 32px;
		text-align: center;
		margin-top: 14px;
	}

	.job_choose {
		background: #F2FCF8;
		border: 1px solid #07C160;
	}

	.job_box view:nth-child(2n) {
		margin-left: 14px;
	}

	.choose-add {
		width: 62px;
		height: 28px;
		background: #F5F5F5;
		border-radius: 2px;
		text-align: center;
		margin-left: auto;
		margin-top: 12px;
		line-height: 28px;
	}

	.type-box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 150px;
		border-bottom: 8px solid #F5F5F5;
	}

	.t-type image {
		width: 62px;
		height: 62px;
	}

	.t-type view {
		text-align: center;
		align-items: center;
	}

	.screen-box {
		display: flex;
		padding: 0 16px;
		position: relative;
		padding-top: 30px;
	}

	.screen-box-f {
		padding-top: 0px;
		position: fixed;
		top: 40px;
		background-color: #FFFFFF;
		z-index: 999;
		width: 100%;
	}

	.screen-choose {
		margin-right: 20px;
		line-height: 44px;
		height: 30px;
	}

	.isScr {
		border-bottom: 3px solid #07C160;
	}

	.content {}

	page {
		background-color: #FFFFFF;
		min-height: 1000px;
	}

	swiper {
		width: 100%;
		height: 140px;
	}

	.swiper {
		width: 100%;
		height: 140px;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.search-box {
		position: absolute;
		width: 100%;
		top: 120px;
	}

	.search-box-f {
		position: fixed;
		width: 100%;
		top: 0px;
		z-index: 999;
	}

	.head {}

	.mall_top_mask {
		/* background-color: #F2F2F2; */
		z-index: 2;
	}

	.type_box {
		background-color: #FFFFFF;
		padding-left: 16px;
		display: flex;
		padding: 14px 16px
	}

	.type_box view {
		width: 30px;
		height: 25px;
		/* border-radius: 12px; */
		text-align: center;
		font-weight: 400;
		font-size: 15px;
		color: #999999;
		line-height: 25px;
	}

	.type_box view:nth-child(2) {
		margin-left: 17px;
	}

	.type_box .is_active {
		/* background-color: #1089FF; */
		color: #1089FF;
	}

	.list-box {
		padding: 0 16px;
		margin-top: 20px;
		/* border-bottom: 1px solid #EEEEEE; */
	}

	.list-box .list {
		margin-bottom: 20px;
		border-bottom: 1px solid #EEEEEE;
	}

	.list-box view {
		margin-bottom: 5px;
	}

	.flex-wrap view {
		margin-right: 5px;
		font-size: 12px;
	}

	.tagstyle {
		height: 18px;
		border-radius: 4px;
		/* border:1px solid rgba(232,232,232,1); */
	}

	.cu-tag {
		background-color: #F5F5F5;
	}

	.cu-tag::after {
		border: none !important;
	}

	.title-box {
		display: flex;
	}

	.tit-l {
		color: #444444;
		font-size: 17px;
		font-weight: blod;
	}

	.tit-r {
		margin-left: auto;
		font-size: 15px;
		color: #999999;
	}

	.money {
		color: #07C160;
		font-size: 15px;
		font-weight: blod;
	}

	.address-box {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #999999;
	}

	.line {
		width: 2px;
		height: 10px;
		background-color: #DDDDDD;
		margin-left: 10px;
	}

	.company {
		margin-left: 10px;
		font-size: 13px;
		color: #999999;
	}

	.HMfilterDropdown {
		top: 50px !important;
	}
</style>